import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom"

const Recommend = () => {
  return <div>Recommend</div>;
};
const Rank = () => {
  return <div>Rank</div>;
};
const Musiclist = () => {
  return <div>Musiclist</div>;
};
const DiscoverDj = () => {
  return <div>DiscoverDj</div>;
};
const DiscoverMusician = () => {
  return <div>DiscoverMusician</div>;
};
const Newsong = () => {
  return <div>Newsong</div>;
};

const routetwo = () => {
  return <>
  <ul>
    <li><a href="/discover/recommend">recommend</a></li>
    <li><a href="/discover/rank">rank</a></li>
    <li><a href="/discover/musiclist">musiclist</a></li>
    <li><a href="/discover/discoverdj">discoverdj</a></li>
    <li><a href="/discover/discovermusician">discovermusician</a></li>
    <li><a href="/discover/newsong">newsong</a></li>
  </ul>
    <Router>
      <Route exact path="/discover" component={Recommend}></Route>
      <Route path="/discover/recommend" component={Recommend}></Route>
      <Route path="/discover/rank" component={Rank}></Route>
      <Route path="/discover/musiclist" component={Musiclist}></Route>
      <Route path="/discover/discoverdj" component={DiscoverDj}></Route>
      <Route path="/discover/discovermusician" component={DiscoverMusician}></Route>
      <Route path="/discover/newsong" component={Newsong}></Route>
    </Router>
  </>
}

export default routetwo